// var
@starbar-prefix-cls       : x-star-bar;
@starbar-default-color    : #a6a6a6;
@starbar-active-color     : #f2dc1f;
@starbar-font-size        : 16px;

// mixins
.starbar-color(@color) {
  .@{starbar-prefix-cls}__item {
    &.active,
    &.hover {
      color: @color;
    }
  }
}

// styles
.@{starbar-prefix-cls} {
  display: inline-block;
  cursor: pointer;
  &__item {
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    line-height: 1.25;
    color: @starbar-default-color;
    font-size: @starbar-font-size;
    &.active,
    &.hover {
      color: @starbar-active-color;
    }
  }
}

// styles - more
.@{starbar-prefix-cls} {
  &-disabled {
    cursor: not-allowed;
  }
  &-brown {
    .starbar-color(@brown-color);
  }
  &-primary {
    .starbar-color(@primary-color);
  }
  &-success {
    .starbar-color(@success-color);
  }
  &-warning {
    .starbar-color(@warning-color);
  }
  &-danger {
    .starbar-color(@danger-color);
  }
  &-info {
    .starbar-color(@info-color);
  }
}
